<div class="content-wrapper" style="min-height: 976px;">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            {{association.name}}
        </h1>
        <ol class="breadcrumb">
            <li><a ui-href="index.myAssociation"><i class="fa fa-dashboard"></i>我的社团</a></li>
            <li class="active">{{association.name}}</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <!-- column -->
            <div class="col-md-12">
                <div class="col-md-6">
                    <!-- general form elements -->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">近期活动</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="box-group" id="accordiona">
                                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                                <div class="panel box box-primary" ng-repeat="l in activityList">
                                    <div class="box-header with-border">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordiona"
                                               data-target="#collapsea{{$index}}" aria-expanded="false"
                                               class="collapsed">
                                                {{l.name}}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapsea{{$index}}" class="panel-collapse collapse" aria-expanded="false"
                                         style="height: 0;">
                                        <div class="box-body">
                                            {{l.description}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">
                            <button class="btn btn-primary"
                                    ui-sref="index.associationApply({association: association})">发布活动
                            </button>
                        </div>
                    </div>
                </div>
                <!-- /.box -->
                <!-- general form elements -->
                <div class="col-md-6">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">通知公告</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="box-group" id="accordionb">
                                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                                <div class="panel box box-primary" ng-repeat="l in announcementList">
                                    <div class="box-header with-border">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordionb"
                                               data-target="#collapseb{{$index}}" aria-expanded="false"
                                               class="collapsed">
                                                {{l.title}}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseb{{$index}}" class="panel-collapse collapse" aria-expanded="false"
                                         style="height: 0;">
                                        <div class="box-body">
                                            {{l.description}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">
                            <button class="btn btn-primary"
                                    ui-sref="index.publishAnnouncement({associationUid: association.uid})">发布通知
                            </button>
                        </div>

                    </div>
                    <!-- /.box -->
                </div>
            </div>
            <!--/.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>